<template>
    <div class="all">
        <!-- <div style="text-align:center;font-size:28px;font-weight:bold;">{{$route.name}}</div> -->
        <div class="search">
            <!-- label-width="85px" -->
            <el-form ref="form" :model="earningsSearch" :inline="true" size="mini">
                <!-- <el-form-item label="日期区间：">
                    <el-select
                        v-model="earningsSearch.dateInterval"
                        clearable
                        placeholder="请选择日期区间"
                    >
                        <el-option
                            v-for="(item,index) in dateIntervalList"
                            :key="index"
                            :label="item.dateInterval"
                            :value="item.dateIntervalValue"
                        ></el-option>
                    </el-select>
                </el-form-item> -->
                <el-form-item label="日期：">
                    <!-- :default-value="defaultValue" -->
                    <el-date-picker
                        v-model="earningsSearch.dataTime"
                        type="daterange"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchClick(2)">查 询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="table">
            <!-- 表格 -->
            <el-table
                :data="earningsTable"
                border
                height="560"
                :style="{width:screenWidth+'px'}"
                :cell-style="cellStyle"
                :header-cell-style="rowClass"
                @selection-change="allSelectionChange"
            >
                <!-- <el-table-column type="selection" width="60px"></el-table-column> -->
                <el-table-column label="订单ID" width="80px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.id }}</span><!--  {{ scope.row.day_time*1000 | formatDateBehind }} -->
                    </template>
                </el-table-column>
                <el-table-column label="时间" width="260px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.day_time*1000 | formatDate }}</span><!--  {{ scope.row.day_time*1000 | formatDateBehind }} -->
                    </template>
                </el-table-column>
                <el-table-column label="洗车台数" width="100px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.wash_num }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="营业额" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.money }}元</span>
                    </template>
                </el-table-column>
                <el-table-column label="服务收益" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.settle }}元</span>
                    </template>
                </el-table-column>
                <el-table-column label="结算收益" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.money-scope.row.settle }}元</span>
                    </template>
                </el-table-column>
                <el-table-column label="门店" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.shop_id | filshopm }}</span>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination
                @size-change="pageCount"
                @current-change="currentPageCount"
                :current-page="currentPage"
                :page-sizes="[100, 500,1000,1500, 2000]"
                :page-size="currentCount"
                layout="prev, pager, next, jumper, sizes,total"
                :total="pageResultSize"
            ></el-pagination>
        </div>
    </div>
</template>

<script>
import echarts from "echarts";
import "../../../static/scss/page.scss";
import utils from "../../util/request";
import {formatDate} from "../../util/time.js";
import {timetamp} from "../../util/time.js";
import {timedata} from "../../util/time.js";
var that;
export default {
    data() {
        return {
            defaultValue: new Date(), //默认显示的加盟方
            // selStartDate: "", //选中的起始加盟方
            // selEndDate: "", //选中的结束加盟方
            // 分页
            currentPage: 1, //初始页面
            currentCount: 100, //当前页面的数据数量
            pageResultSize: 10, //表格数据总数
            screenWidth: window.innerWidth, //可视宽度
            shopname: "",//店名
            earningsSearch: {
                //搜索
                dateInterval: "", //日期区间
                dataTime: "" //加盟方段
            },
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now() //- 8.64e7;如果没有后面的-8.64e7就是不可以选择今天的 
                }
            },
            // pickerOptions: {
            //     disabledDate(time) {
            //         console.log(selStartDate,time.getTime() > Date.now())
            //         // if (this.selStartDate) {
            //         // } else {
            //         //     return (time.getTime() > Date.now() || time.getTime() <= Date.now());
            //         // }
            //     }
            // },
            // dateIntervalList: [
            //     {
            //         dateInterval: "2020-07-01~2020-07-31",
            //         dateIntervalValue: "2020-07-01~2020-07-31"
            //     },
            //     {
            //         dateInterval: "2020-08-01~2020-08-31",
            //         dateIntervalValue: "2020-08-01~2020-08-31"
            //     },
            //     {
            //         dateInterval: "2020-06-01~2020-06-30",
            //         dateIntervalValue: "2020-06-01~2020-06-30"
            //     }
            // ],
            earningsTable: [
                {
                    joinIn: "中石油", //加盟方
                    allearnings: "10", //洗车台次
                    serviceRevenue: 18, //服务收益
                    afterEarnings: 10, //售后收益
                    total: 28 //合计
                },
                {
                    joinIn: "中石油", //加盟方
                    allearnings: "10", //洗车台次

                    serviceRevenue: 18, //服务收益
                    afterEarnings: 10, //售后收益
                    total: 28 //合计
                },
                {
                    joinIn: "中石油", //加盟方
                    allearnings: "10", //洗车台次

                    serviceRevenue: 18, //服务收益
                    afterEarnings: 10, //售后收益
                    total: 28 //合计
                },
                {
                    joinIn: "中石油", //加盟方
                    allearnings: "10", //洗车台次
                    serviceRevenue: 18, //服务收益
                    afterEarnings: 10, //售后收益
                    total: 28 //合计
                }
            ]
        };
    },
    filters:{
        // 用户名
        filname(id){
            if(id === 1){
                id = "已结算"
            }else if(id === 2){
                id = "未结算"
            }else{return}
            return id
        },
        // 店名
        filshopm(id){
            if(that.shopname !== ""){
                that.shopname.forEach((item)=>{
                    id === item.id ? id = item.name : "";
                })
            }
            return id
        },
        // 时间
		formatDate(time){
			var date = new Date(time);
			return formatDate(date, 'yyyy-MM-dd');
		},
		formatDateBehind(time){
			var date = new Date(time);
			return formatDate(date, 'hh:mm:ss')
		}
    },
    methods: {
        searchClick(num) {
            // 查询
            let data = {page:this.currentPage,list_rows:this.currentCount,settle_state:1};
            // data.shop_id = this.earningsSearch.shop_id;
            if(this.earningsSearch.dataTime !== "" && this.earningsSearch.dataTime !== null){
                data.start_time = timetamp(String(this.earningsSearch.dataTime[0]));//开始时间
                data.end_time = timedata(this.earningsSearch.dataTime[1]);//结束时间))
            }
            // for(var i in data) data[i] === "" ? delete data[i] : "";
            console.log(data)
            utils.request("/dayStatement/list","post",JSON.stringify(data)).then(resp=>{
                console.log(resp)
                this.earningsTable = resp.data.data.data;
                this.pageResultSize = resp.data.data.total;
                if(num === 2){
                    resp.data.data.total > 0 
                    ? this.$message({
                        message: "找到" + resp.data.data.total + "条数据",
                        type: "success"
                    }) : this.$message("没有符合条件的数据")
                }
            })
        },
        //   表格居中
        cellStyle: function({ row, column, rowIndex, columnIndex }) {
            return "text-align:center;";
        },
        rowClass: function({ row, rowIndex }) {
            return "text-align:center;";
        },
        allSelectionChange: function(val) {
            // 获取选中的内容
            console.log(val);
        },
        // 每页数据的数量
        pageCount: function(val) {
            this.currentCount = val;
            this.searchClick(1)
        },
        // 点击的第几页
        currentPageCount: function(val) {
            this.currentPage = val;
            this.searchClick(1)
        }
    },
    watch: {
        "earningsSearch.dateInterval"(newValue, oldValue) {
            let that = this;
            console.log(oldValue);
            console.log(newValue);
            that.earningsSearch.dateInterval = newValue;
            that.selStartDate = "2020-07-01";
            that.selEndDate = "2020-07-31";
        },
        "earningsSearch.dataTime"(newValue, oldValue) {
            console.log(oldValue);
            console.log(newValue);
            this.earningsSearch.dataTime = newValue;
            console.log(this.earningsSearch.dataTime);
        }
    },
    mounted() {
        let that = this;
        // that.pickerOptions = {
        //     disabledDate(time) {
        //         if (that.earningsSearch.dateInterval) {
        //             let start = that.selStartDate;
        //             let end = that.selEndDate;
        //             that.defaultValue = new Date(start).getTime();
        //             return (
        //                 time.getTime() > new Date(end).getTime() ||
        //                 time.getTime() <
        //                     new Date(start).getTime() - 24 * 60 * 60 * 1000 //前一天
        //             );
        //         } else {
        //             return (
        //                 time.getTime() > Date.now() ||
        //                 time.getTime() < Date.now()
        //             );
        //         }
        //     }
        // };
    },
    created() {
        // utils.request("incomes", "post").then(res => {
        //     console.log(res);
        // });
        utils.request("/shop/list","post",JSON.stringify({page:1,list_rows:999999999})).then(resp=>{
            this.shopname = resp.data.data.data;
        })
        this.searchClick(1);
    },
    beforeCreate(){
        that = this;
    }
};
</script>




